<template>
  <div class="x-card">
    <div class="title-style" v-if="title">
      <div class="left">{{ title }}</div>
      <div class="right">
        <slot name="title-right"></slot>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'x-card',
    props: {
      title: {
        type: String,
        default: '',
      },
    },
  }
</script>

<style lang="scss" scoped>
  .x-card {
    padding: 20px;
    background-color: #fff;

    .title-style {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        height: 21px;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 18.75px;
        color: rgba(32, 32, 32, 1);
        text-align: left;
      }
      .right {
        font-size: 12px;
        font-weight: 400;
        color: #818181;
      }
    }
  }
</style>
